<!--
	
	来源:http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%e7%bb%9d%e5%af%b9%e5%ae%9a%e4%bd%8d-%e6%b0%b4%e5%b9%b3%e5%9e%82%e7%9b%b4%e5%b1%85%e4%b8%ad/
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.dialog {
				width: 600px;
				height: 400px;
				margin: auto;
				border: 1px solid #ddd;
				border-radius: 15px;
				background-color: #fff;
				box-shadow: 0 3px 18px rgba(0, 0, 0, .5);
			}
			
			.dialog_absolute {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}
			
			.button {
				display: block;
				margin: 170px auto;
				width: 160px;
				height: 36px;
				font-size: 14px;
			}
		</style>
	</head>

	<body>
<div id="dialog" class="dialog">
    <input type="button" id="button" class="button" value="点击弹框走起~~" />
</div>
	</body>
<script>
	var eleDialog = document.getElementById("dialog"),
    eleButton = document.getElementById("button");

eleButton.onclick = function() {
    if (eleDialog.className === "dialog") {
        eleDialog.className = "dialog dialog_absolute";
        this.value = "点击弹框降落~~";    
    } else {
        eleDialog.className = "dialog";
        this.value = "点击弹框走起~~";    
    }
};
</script>
</html>